//1.引入Vue
import Vue from "vue";

//2.引入Vuex
import Vuex from "vuex";

//4.引入axios
import axios from "axios";

//3.Vuex本质是一个Vue插件,所以我们要让Vue使用这个Vuex这个插件
Vue.use(Vuex)



//创建一个state对象
const state = {
  count: 0,
  price: 99,
  movieList: [],
};

//创建一个mutations对象
const mutations = {
  // mutation中的函数的第一个参数就是当前的state对象
  //既然 Vuex 的 store 中的状态是响应式的,Vuex 中的 mutation 也需要与使用 Vue 一样遵守一些注意事项(修改数据的注意事项)
  increment(state) {
    state.count++;
  },
  //mutation中的函数的第二个参数载荷(payload) 都是接收commit的传参
  //vuex还是希望payload是一个对象,这样可以传递多个参数
  incrementN(state, {
    n
  }) {
    state.count += n;
  },
  decrement(state) {
    state.count--;
  },

  setMovieList(state, movieList) {
    state.movieList = movieList;
  },

}
//创建actions对象
const actions = {
  //写了一个函数,模拟定时器
  // 因为actions中一定会调用commit去调用mutation,所以action中的函数,接受一个对象,对象中提供一个commit方法
  incrementWait({
    commit
  }) {
    //我们不要在action中操作数据
    setTimeout(() => {
      //当异步完成以后,提交increment给mutation去操作数据
      commit("increment");
    }, 2000);
  },

  incrementNWait({
    commit
  }, payload) {
    // console.log(payload, "payload");
    setTimeout(() => {
      //我们不要在action中操作数据
      //当异步完成以后,把数据交给mutation去操作数据
      commit("incrementN", payload);
    }, 2000);
  },

  async getMovieList({
    commit
  }) {
    const result = await axios.get(
      "https://pcw-api.iqiyi.com/search/recommend/list?channel_id=1&data_type=1&mode=11&page_id=2&ret_num=48&session=b9fd987164f6aa47fad266f57dffaa6a"
    );
    commit("setMovieList", result.data.data.list);
  },
}

//4.创建一个store(vuex的实例),参数是一个配置对象,在配置对象中可以配置actions,mutations,state,getters等等
//暴露出去供Vue实例的配置项挂载
export default new Vuex.Store({
  state,
  mutations,
  actions
})